<template>
  <div style="width: 100%;">
    <div style="width:100%;height:100px; display: flex;justify-content: center;
            align-items: center;gap: 20px;">
      <div>
        订单号:<el-input v-model="data.input.ordid" style="width: 240px" placeholder="请输入订单号" />
      </div>
      <div>
        姓名:<el-input v-model="data.input.ship2name" style="width: 240px" placeholder="请输入收货人姓名" />
      </div>
      <div>
        <el-button @click="search()" :icon="Search" plain />
      </div>
    </div>
    <div style="">
      <el-table :data="data.orditem" style="width: 100%" border lazy>
        <el-table-column label="订单ID">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.ordid }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收货人">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.ship2name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收货人手机号">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.ship2phone }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="收货地址">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.ship2addr }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="发货情况">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{status(scope.row.ship_status)}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建订单时间">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ mydate(scope.row.tcreate) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button v-if="scope.row.ship_status==0" size="small" type="danger" @click="go2Update(scope.row.ordid)">
              是否发货
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style=" display: flex; justify-content: center;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="data.page"
        :current-page="data.paging.pagenum"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { $get, $postf, $postx } from "../../../ajax/index.js"
import myalert from "../../../utils/myalert.js"
import store from "../../../store/index.js"
import { useRoute, useRouter } from 'vue-router'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'

const data = reactive({
  orditem: [],
  input: { ship2name: "" },//搜索框
  orders: [],
  paging: { pagenum:0, lines: 5 },//分页
  page: 0,
})
onMounted(() => {
  $postx("/api/adm/order/findPage", data.paging)
    .then((resp) => {
      console.log(resp.data.data)
      data.orditem = resp.data.data;
    })

  $get("/api/adm/order/page")
    .then((resp) => {
      console.log(resp.data.data)
      data.page = resp.data.data*10
    })
})

// 搜索框
function search() {
  let fd = new FormData();
  fd.append("ordid", data.input.ordid)
  fd.append("ship2name", data.input.ship2name)
  fd.append("ship2phone", data.input.ship2phone)
  fd.append("ship2addr", data.input.ship2addr)
  $postx('/api/adm/order/findAlls', data.input)
    .then((resp) => {
      console.log(resp.data.data)
      data.orditem = resp.data.data
    })
}

/* 日期格式化 */
function mydate(d) {
  d = new Date(d);
  console.log(d)
  console.log(typeof d)
  let yy = d.getFullYear();
  let mm = d.getMonth() + 1;
  let dd = d.getDate();
  let b = yy + "年" + mm + "月" + dd + "日";
  return b;
}

function prev() {
  console.log("s行业");
}

// 显示
function status(st) {
  if (st == 0) return "未发货";
  if (st == 1) return "已发货";
  if (st == 2) return "已收货";
}

// 发货
function go2Update(ordid) {
  console.log(ordid)
  data.orders.ordid = ordid;
  data.orders.ship_status = 1;
  $postx("/api/adm/order/update", data.orders)
    .then((resp) => {
      console.log(resp.data.data)
      data.order = resp.data.data;
      ElMessage({
        message: "发货成功!!!",
        type: 'success',
      })
    })
}

function handleCurrentChange(page) {
  data.paging.pagenum = page;
  console.log('当前页码:', page);
  console.log(data.paging)
  data.paging.lines=5*page;
  data.paging.pagenum=data.paging.pagenum-1;
  data.paging.pagenum=data.paging.pagenum+page*5;
  console.log(data.paging)
  // 这里可以添加根据页码重新请求数据的逻辑
  $postx("/api/adm/order/findPage", data.paging)
   .then((resp) => {
      console.log(resp.data.data)
      data.orditem = resp.data.data;
    });

	
}
</script>

<style>
</style>